<template>
  <div class="all">
    <!-- 个人主页 -->
    <div class="personal-information-page">
      <!-- 更多服务 -->
      <div class="more-serve">
        <!-- 标题 -->
        <div class="serve-title">更多服务</div>
        <div class="serve-project">
          <!-- 用户反馈 -->
          <van-goods-action-icon
            class="info"
            icon="question-o"
            text="用户反馈"
            to="/feedback"
          />
          <!-- 小智同学 -->
          <van-goods-action-icon
            class="info"
            color="#fc6627"
            icon="phone-circle"
            text="小智同学"
          />
        </div>
      </div>
    </div>
    <!-- 背景板 -->
    <div class="background">
      <!-- 个人信息栏 -->
      <div class="personal-information">
        <!-- 个人头像 -->
        <van-image
          round
          fit="cover"
          width="48px"
          height="48px"
          class="personal-img"
          :src="userProfile.photo"
        />
        <!-- 个人昵称 -->
        <div class="nickname">{{ userProfile.name }}</div>
        <!-- 个人信息 -->
        <div>
          <span class="personal">个人信息</span>
          <span>
            <van-icon
              name="arrow"
              color="#e0eced"
            />
          </span>
        </div>
      </div>
      <!-- 动态 关注 粉丝 被赞 -->
      <div class="dynamic-follow-fans-liked">
        <!-- 动态 -->
        <div class="info">
          <div>{{ userProfile.art_count }}</div>
          <div>动态</div>
        </div>
        <div class="info">
          <div>{{ userProfile.follow_count }}</div>
          <div>关注</div>
        </div>
        <div class="info">
          <div>{{ userProfile.fans_count }}</div>
          <div>粉丝</div>
        </div>
        <div class="info">
          <div>{{ userProfile.like_count }}</div>
          <div>被赞</div>
        </div>
      </div>
      <!-- 个人消息提示 -->
      <div class="information-tips">
        <!-- 消息通知 -->
        <van-goods-action-icon
          size
          icon="volume-o"
          text="消息通知"
        />
        <!-- 我的收藏 -->
        <van-goods-action-icon
          icon="like-o"
          text="我的收藏"
        />
        <!-- 阅读历史 -->
        <van-goods-action-icon
          icon="clock-o"
          text="阅读历史"
        />
        <!-- 我的作品 -->
        <van-goods-action-icon
          icon="flower-o"
          text="我的作品"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {

  name: 'MinePage',
  data() {
    return {

    };
  },
  methods: {
    ...mapActions('user', [
      'updateUserProfile'
    ])
  },
  computed: {
    ...mapState('user', [
      'userProfile'
    ])
  },
  created() {
    this.updateUserProfile();
    console.log(this.userProfile);
  },
}
</script>

<style lang="less" scoped>
.all {
  display: flex;
  background-color: #f8f8f8;
  flex-direction: column;
  // 背景板
  .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 250px;
    background: linear-gradient(318deg,#b2b5db,#565482 70%,#494675);
    border-bottom-left-radius: 10.66667rem 1.6rem;
    border-bottom-right-radius: 10.66667rem 1.6rem;
    padding: 32px 16px;
    box-sizing: border-box;

    // 个人信息栏
    .personal-information {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // 个人头像
      .personal-img {
        border: 2px solid #716f9d;
      }
      // 个人昵称
      .nickname {
        margin-left: -80px;
        color: #e0eced;
        font-size: 20px;
      }
      // 个人信息
      .personal {
        color: #e0eced;
        font-size: 14px;
      }
    }
    // 动态 关注 粉丝 被赞
    .dynamic-follow-fans-liked {
      display: flex;
      justify-content: space-around;
      margin: 42px 0;
      // 每一项
      .info {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #e0eced;
      }
    }
    // 个人消息提示
    .information-tips {
      width: 95%;
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      padding: 16px 12px;
      box-sizing: border-box;
      border-radius: 8px;
      margin: 0 auto;
    }
  }
  // 个人信息页
  .personal-information-page {
    width: 100%;
    margin-top: 250px;
    padding: 32px 16px;
    box-sizing: border-box;
    flex-direction: column;
    // 更多服务
    .more-serve {
      background-color: #fff;
      padding: 12px 16px;
      box-sizing: border-box;
      border-radius: 8px;
      width: 95%;
      margin: 0 auto;
    }
    // 用户反馈 小智同学
    .serve-project {
      margin-top: 16px;
      display: flex;
      .info {
        width: 25%;
        height: 100%;
        margin: 10px 10px 10px -10px;
        font-size: 14px;
      }
    }
  }
}
// 背景板

</style>
